<html style="height: 100%"  xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>城市员工年度销售额</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="icon" th:href="@{/favicon.ico}">
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
  <link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
</head>


<body style="height: 100%; margin: 0">
<!-- 搜索条件开始 -->
<form class="layui-form" method="post" id="searchFrm">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label" style="width: 80px">城市</label>
      <div class="layui-input-inline">
        <select name="cId" id="search_city" lay-search="">
          <option value="">请选择城市</option>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
    </div>
  </div>
</form>
<!-- 搜索条件结束 -->

<div id="container" style="height: 100%" ></div>
<script type="text/javascript" th:src="@{/js/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
  layui.use([ 'jquery', 'layer', 'form', ], function() {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;

    $.ajax({
      url: "/admin/city/getCity1",
      success: function (res){
        var citys = res.data;
        var html = "<option value=''>请选择城市</option>";
        $.each(citys, function (index, item) {
          html += "<option value='" + item.id + "'>" + item.name + "</option>";
        });
        $("#search_city").html(html);
        form.render("select");
      },
      dataType: "json"
    });

    $("#doSearch").click(function(){
      getCity();
    });
    function getCity(){
      var city = $("#search_city").val();
      $.get("/admin/analysis/LoadStaffCity",{city:city},function(data){
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
          title : {
            text : '城市员工年度销售额',
            left : 'center'
          },
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: data.name,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '销售额',
              type: 'bar',
              barWidth: '60%',
              data: data.value
            }
          ]
        };
        ;
        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }
      })
    }

    $(function(){
      getCity();
    })

  });

</script>
</body>
</html>